<!--
 * @author tianchao
 职工钱包账号管理
 -->
<template>
  <el-container id="staff-wallet-account">
    <split-pane split="vertical" :min-percent="0" :default-percent="28">
      <template slot="paneL">
        <div class="leftWrap">
          <div class="search-tree-wrap">
            <el-input
              v-model.trim="treeName"
              style="width:75%"
              placeholder="组织名称搜索"
              class="search-input"
              clearable
              @clear="clearSearchTree"
            />
            <el-button class="filter-item tree-filter" type="primary" @click="handleFilterTree">搜索
            </el-button>
          </div>
          <el-tree
            v-if="!issearchtree"
            ref="qytree"
            key="lodTree"
            v-loading="treeLoading"
            :data="treeData"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            class="dictTree"
            highlight-current
            :load="loadtree"
            node-key="id"
            lazy
            :default-expanded-keys="[treeData.length>0 && treeData[0].id]"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
          <el-tree
            v-if="issearchtree"
            ref="qytree"
            key="newTree"
            v-loading="treeLoading"
            :data="treeData"
            :expand-on-click-node="false"
            :props="defaultProps"
            default-expand-all
            class="dictTree"
            highlight-current
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <!--              <span
                :class="['tag', data.type==='JGLX01'?'gh':data.type==='JGLX02'?'qy':data.type===''?'bm':'']"
              >{{
                data.typeValue || ''
              }}</span>-->
            </span>
          </el-tree>
        </div>
      </template>
      <template slot="paneR">
        <el-main class="user-main">
          <div v-if="!isShow" class="ts-con">
            <div class="ts">
              <i class="el-icon-info" />
              <span v-html="showMsg" />
            </div>
          </div>
          <div v-else id="enterprise-usermanage">
            <el-collapse-transition>
              <div v-show="searchshow" class="course-search merge">
                <span class="svg-container">
                  <svg-icon icon-class="search" />
                </span>
                <el-input
                  v-model.trim="listQuery.commonParam"
                  placeholder="请输入关键字搜索"
                  class="search-input"
                  @keyup.enter.native="handleFilter"
                />
                <div class="course-search-btn">
                  <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
                  <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                  <span class="course-search-more" @click="searchshow = !searchshow">
                    更多筛选条件
                    <i class="el-icon-arrow-down" />
                  </span>
                </div>
              </div>
            </el-collapse-transition>
            <el-collapse-transition>
              <div v-show="!searchshow" class="course-search separate">
                <div class="course-search-inner">
                  <el-row>
                    <el-col :span="8">
                      <div class="search-inner-item">
                        <div class="item-label">真实姓名</div>
                        <el-input
                          v-model.trim="search.userRealname"
                          style="width: 90%;"
                          class="filter-item"
                          placeholder="请输入真实姓名搜索"
                        />
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="search-inner-item">
                        <div class="item-label">联系电话</div>
                        <el-input
                          v-model.trim="search.phoneNumber"
                          style="width: 90%;"
                          class="filter-item"
                          placeholder="请输入联系电话搜索"
                        />
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="search-inner-item">
                        <div class="item-label">证件号码</div>
                        <el-input
                          v-model.trim="search.userIdnumber"
                          style="width: 90%;"
                          class="filter-item"
                          placeholder="请输入完整证件号码"
                        />
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="search-inner-item">
                        <div class="item-label">是否开户</div>
                        <el-select v-model.trim="search.openAccount" clearable placeholder="请选择">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div class="course-search-btn">
                  <el-button type="primary" @click="handleFilter">搜索</el-button>
                  <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                  <span class="course-search-more" @click="searchshow = !searchshow">
                    精简筛选条件
                    <i class="el-icon-arrow-up" />
                  </span>
                </div>
              </div>
            </el-collapse-transition>
            <div class="btn-container">
              <div class="btn-container-title">
                <span>职工钱包账号管理</span>
                <span v-if="currentNode.name">
                  <span v-if="breadList.length > 0">,当前选择</span>
                  <span
                    v-if="breadList.length"
                    class="btn-container-title-select"
                    :title="breadList.join('>')"
                  >{{ breadList.join('>') }}</span>
                </span>
              </div>
              <div class="btn-container-btns">
                <el-button class="filter-item" style="margin-left: 10px;" @click="handleExport">导出
                </el-button>
              </div>
            </div>
            <div class="table">
              <el-table
                ref="rolemantable"
                v-loading="listLoading"
                :data="list"
                class="tableScope"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="userRealname" label="真实姓名" show-overflow-tooltip width="130" />
                <el-table-column prop="deptName" label="所属部门" show-overflow-tooltip width="200" />
                <el-table-column prop="phoneNumber" label="联系电话" show-overflow-tooltip width="130">
                  <template slot-scope="scope">
                    <span>{{ handleDecrypt(scope.row.phoneNumber) }}</span>
                  </template>
                </el-table-column>
                <!--            <el-table-column prop="userSexName" label="性别" show-overflow-tooltip />-->
                <el-table-column prop="userIdnumber" label="证件号码" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ handleDecrypt(scope.row.userIdnumber) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="userEmail" label="账户开通情况" width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ handleStatus(scope.row) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="userEmail" label="账户余额" width="100" align="right">
                  <template slot-scope="scope">
                    <el-tooltip
                      v-if="scope.row.sysUserAccount"
                      class="item"
                      effect="dark"
                      :content="'截止：'+scope.row.sysUserAccount.renovateTime+'时余额为：'+scope.row.sysUserAccount.balance "
                      placement="top"
                    >
                      <div>
                        <span>{{ scope.row.sysUserAccount.balance }}</span>
                      </div>
                    </el-tooltip>
                    <span v-else />
                  </template>
                </el-table-column>
                <el-table-column prop="isAuthName" label="三类电子账号" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ handleAccountDecrypt(scope.row, 'thirdElectronicAccount') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="isAuthName" label="三类虚拟账号" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ handleAccountDecrypt(scope.row, 'thirdVirtualAccount') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="isAuthName" label="二类电子账号" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ handleAccountDecrypt(scope.row, 'secondElectronicAccount') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="isAuthName" label="二类虚拟账号" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ handleAccountDecrypt(scope.row, 'secondVirtualAccount') }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                  align="center"
                  width="200"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="handleView(scope.row)">
                      账户详情
                    </el-button>
                    <el-button type="text" size="mini" @click="handleUpgradeInfo(scope.row)">
                      升级信息
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="btn-pagion fix">
              <pagination
                v-show="total>0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
                @pagination="getList"
              />
            </div>
            <!--  账户详情      -->
            <account-detail v-if="showDetail" :id="obj.id" @cancel="showDetail = false" />
            <!--升级信息        -->
            <el-dialog
              v-el-drag-dialog
              :close-on-click-modal="false"
              title="升级信息"
              :visible.sync="dialogFormVisible"
              center
              width="600px"
              top="10vh"
            >

              <section class="upgrade-content">
                <section class="info-item">
                  <section class="item-label">状态：</section>
                  <section class="item-content">{{ upgradeInfo.upgradeStatusValue }}</section>
                </section>
                <section class="info-item">
                  <section class="item-label">升级流水号：</section>
                  <section class="item-content">{{ upgradeInfo.runningNumber }}</section>
                </section>
                <section class="info-item">
                  <section class="item-label">升级时间：</section>
                  <section class="item-content">{{ upgradeInfo.updTime }}</section>
                </section>
                <section class="info-item">
                  <section class="item-label">结果说明：</section>
                  <section class="item-content">{{ upgradeInfo.upgradePrompting }}</section>
                </section>
              </section>
              <div slot="footer" class="dialog-footer">
                <el-button style="padding: 8px 30px;" type="primary" @click="dialogFormVisible = false">
                  关闭
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-main>
      </template>
    </split-pane>
  </el-container>
</template>

<script>
import {
  getComAndOrgTree,
  getUserList,
  roleListByName,
  getUpgradeInfo,
  exportFile,
  exportCopy,
  maskAPI,
  noMaskAPI
} from '@/views/datastatistics/wallet/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import CryptoJS from '@/utils/aesJiaJM'
import permission from '@/directive/permission/index.js' // 权限判断指令
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import OrgTree from '@/views/personmanage/components/orgtree' // Secondary package based on el-pagination
import AccountDetail from '@/views/datastatistics/wallet/components/accountDetail'
import splitPane from 'vue-splitpane'
import { exportSign } from '@/utils/fileImportOrExportSign'
import {
  mapGetters
} from 'vuex'
import { exportCheck } from '@/utils/sensitiveInfoExportCheck'
export default {
  name: 'StaffWalletAccount',
  components: {
    Pagination,
    OrgTree,
    AccountDetail,
    splitPane
  },
  directives: {
    permission,
    elDragDialog
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  data() {
    return {
      options: [{
        value: '0',
        label: '未开通'
      }, {
        value: '1',
        label: '已开通'
      }, {
        value: '2',
        label: '二类户'
      }, {
        value: '3',
        label: '三类户'
      }],
      isCode: true,
      dialogVisible: false,
      loadingUpload: false,
      OrgTreedialog: false,
      isShow: false,
      issearchtree: false,
      showMsg: '单击左侧菜单项进行维护',
      getVisible: false,
      treeLoading: false,
      info: {
        id: '',
        password: ''
      },
      listQuery: {
        page: 1,
        limit: 10,
        commonParam: '',
        isSearch: 0
      },
      searchshow: true,
      search: {
        userRealname: '',
        phoneNumber: '',
        userIdnumber: '',
        openAccount: ''
      },
      uploadVisible: false,
      list: [],
      treeData: [],
      treeName: '',
      total: 0,
      dialogFormVisible: false,
      multipleSelection: [],
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      checkedData: [],
      listLoading: false,
      breadList: [],
      currentNode: {},
      currentClickData: {},
      selectOrgTree: [{}],
      temporaryOrg: {},
      curNodeOrgIdOrDeptId: {
        orgId: '',
        deptId: ''
      },
      showDetail: false,
      obj: {},
      upgradeInfo: {}
    }
  },
  created() {
    this.getTreeData()
  },
  mounted() {

  },
  methods: {
    /**
			 * 查看账户详情
			 * */
    handleView(row) {
      if (row.sysUserAccount) {
        this.obj = Object.assign({}, row)
        this.showDetail = true
      } else {
        this.$message({
          title: '提示',
          message: '用户暂未开通账号',
          type: 'warning'
        })
      }
    },
    /**
			 * 查看升级信息
			 * */
    handleUpgradeInfo(row) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getUpgradeInfo({
          userId: row.id
        }).then((res) => {
          this.upgradeInfo = res.data.data || {}
          this.dialogFormVisible = true
          loading.close()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    /**
			 * 解密
			 */
    handleDecrypt(str) {
      if (str) {
        return CryptoJS.$aesJieM(str)
      } else {
        return ''
      }
    },
    /**
			 * 解密
			 */
    handleAccountDecrypt(row, str) {
      if (row.sysUserAccount) {
        if (str) {
          return CryptoJS.$aesJieM(row.sysUserAccount[str])
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    /**
			 * 账号开通情况
			 * 未开通、三类户、二类户
			 * */
    handleStatus(row) {
      if (row.sysUserAccount) {
        return row.sysUserAccount.isSecond == '0' ? '三类户' : row.sysUserAccount.isSecond == '1' ? '二类户' : ''
      } else {
        return '未开通'
      }
    },
    /**
			 * 企业名称查询树提供的检索方法
			 */
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    /**
			 * 清空搜索企业
			 */
    clearSearchTree() {
      this.treeName = ''
      this.issearchtree = false
      this.getTreeData()
    },
    /**
			 * 按企业名称查询
			 */
    handleFilterTree() {
      if (this.treeName === '') {
        this.issearchtree = false
        this.getTreeData()
      } else {
        this.treeLoading = true
        return new Promise((resolve, reject) => {
          roleListByName({
            name: this.treeName
          }).then(response => {
            this.treeData = response.data.data
            this.issearchtree = true
            this.treeLoading = false
          }).catch(error => {
            reject(error)
            this.issearchtree = false
            this.treeLoading = false
          })
        })
      }
    },
    getTreeData() {
      this.treeLoading = true
      return new Promise((resolve, reject) => {
        getComAndOrgTree().then(response => {
          this.treeLoading = false
          this.treeData = response.data.data
          if (this.treeData.length > 0) {
            this.$nextTick(() => {
              this.$refs.qytree.setCurrentKey(this.treeData[0].id)
              this.$refs.qytree.setCurrentKey(this.treeData[0].id)
              const node = this.$refs.qytree.getCheckedNodes()
              this.handleNodeClick(this.treeData[0], node)
            })
          }
        }).catch(error => {
          reject(error)
          this.treeLoading = false
        })
      })
    },
    loadtree(node, resolve) {
      console.log(node)
      this.treeloading = true
      if (node.level !== 0) {
        if (node.data.deptId !== '') {
          getComAndOrgTree({
            parentId: node.data.orgId,
            deptPId: node.data.deptId
          }).then(res => {
            this.treeloading = false
            resolve(res.data.data)
          }).catch(res => {
            this.treeloading = false
            resolve([])
          })
        } else {
          getComAndOrgTree({
            parentId: node.data.id
          }).then(res => {
            this.treeloading = false
            resolve(res.data.data)
          }).catch(res => {
            this.treeloading = false
            resolve([])
          })
        }
      }
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        orgId: this.curNodeOrgIdOrDeptId.orgId || '',
        deptId: this.curNodeOrgIdOrDeptId.deptId || '',
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      if (this.searchshow) {
        query['commonParam'] = this.listQuery.commonParam
      } else {
        query['userRealname'] = this.search.userRealname
        query['phoneNumber'] = this.search.phoneNumber
        query['userIdnumber'] = this.search.userIdnumber
        query['openAccount'] = this.search.openAccount
      }
      return new Promise((resolve, reject) => {
        getUserList(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      // this.search.isSearch = 1 // 暂时屏蔽全局搜索人员
      this.getList()
    },
    resettingBtn() {
      this.listQuery.commonParam = ''
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.listQuery.page = 1
      this.getList()
    },
    /**
			 * 获取当前树节点和其父级节点
			 */
    getTreeNode(Node) {
      if (Node) {
        if (Node.label !== undefined) {
          this.breadList.unshift(Node.label) // 在数组头部添加元素
          this.getTreeNode(Node.parent) // 递归
        }
      }
    },
    // 点击树
    handleNodeClick(data, Node) {
      console.log(data)
      this.breadList = []
      this.getTreeNode(Node)
      this.currentNode = Object.assign({}, data)
      this.selectOrgTree = [{
        orgId: data.id,
        name: data.name
      }]
      this.curNodeOrgIdOrDeptId = {
        orgId: data.orgId || '',
        deptId: data.deptId || ''
      }
      this.resettingBtn()
      this.isShow = true
    },
    getParentId(id) {
      const node = this.$refs.qytree.getNode(id)
      if (node && node.data && node.data.type === 'com') {
        return node.data
      } else if (node && node.data) {
        return this.getParentId(node.parent.data.id)
      } else {
        return ''
      }
    },
    handleSelectionChange(arr) {
      this.multipleSelection = arr
    },

    /*
			 * 打开组织树
			 * */
    OpenOrgTreedialog() {
      this.OrgTreedialog = true
      this.$nextTick(() => {
        console.log(this.selectOrgTree[0])
        this.$refs.showOrgTree.selectData = this.selectOrgTree[0].orgId === this.selectOrgTree[0]
          .deptId || this.selectOrgTree[0].deptId === '' ? this.selectOrgTree[0].orgId : this
            .selectOrgTree[0].deptId
        this.$refs.showOrgTree.clearSearchTree()
        this.$refs.showOrgTree.echo()
      })
    },
    // 勾选组织
    selectOrg(val) {
      console.log(val)
      this.temporaryOrg = [val]
    },
    /**
			 * 导出按钮点击事件
			 * @param row
			 */
    handleExport() {
      const query = {
        orgId: this.curNodeOrgIdOrDeptId.orgId || '',
        deptId: this.curNodeOrgIdOrDeptId.deptId || ''
      }
      if (this.searchshow) {
        query['commonParam'] = this.listQuery.commonParam
      } else {
        query['userRealname'] = this.search.userRealname
        query['phoneNumber'] = this.search.phoneNumber
        query['userIdnumber'] = this.search.userIdnumber
        query['openAccount'] = this.search.openAccount
      }
      const obj = exportSign(query).obj
      // alert(1)
      exportCheck('DATA_STATISTICS_WALLETSTATISTICAL', '', maskAPI, noMaskAPI, obj, '职工钱包账号信息.xlsx')
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss">
	@import '@/styles/mixin.scss';

$dark_gray: #bfced6;
#staff-wallet-account {
  height: calc(100vh - 60px);
  padding: 0px;
	overflow: hidden;
	.vue-splitter-container{
		width: 100%;
		overflow: hidden;
	}
  .leftWrap {
    background: #fff;
    padding: 10px;
		height: 100%;
		overflow-y: auto;
    .search-tree-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tree-filter {
        padding: 10px 18px;
      }
    }

    .el-tree-node__content {
      margin-top: 10px;
    }

    .tag {
      font-size: 12px;
      border-radius: 4px;
      padding: 2px 4px;
      color: #fff;

      &.gh {
        color: #ff7474;
        border: 1px solid #ff7474;
      }

      &.qy {
        color: #2fbcfb;
        border: 1px solid #2fbcfb;
      }

      &.bm {
        color: #ffa11c;
        border: 1px solid #ffa11c;
      }
    }

    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .el-icon-caret-right:before {
      content: '\E7A0';
      font-size: 14px;
    }

    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      content: '\E7A2';
      font-size: 14px;
    }
  }

  .user-main {
    padding: 10px;
    position: relative;
		background: #fff;
		overflow-y: auto;
		height: 100%;
    .ts-con {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: white;

      .ts {
        line-height: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -15px;
        margin-left: -110px;
        width: 210px;
        text-align: center;
        background: white;
        border-radius: 2px;
        box-shadow: 1px 1px 5px #e0dbdb;
        font-size: 14px;
        font-family: Microsoft Yahei In-Bold, Microsoft Yahei,
        Apple LiGothic Medium;
        color: #222222;
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }

  }
}

#enterprise-usermanage {
  background-color: #ffffff;
  height: 100%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  padding: 10px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .course-search {
    background-color: #fff;
    padding: 0 10px;

    .svg-container {
      padding: 0 5px 0 10px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;

      &_login {
        font-size: 10px;
      }
    }

    .search-input {
      width: 40%;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }

      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;

        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }

    .course-search-btn {
      display: inline-block;
      float: right;

      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }

      .course-search-more {
        font-size: 14px;
        font-weight: 500;
        @include font-color($mainColor);
        cursor: pointer;
        margin-left: 10px;
      }
    }

    &.merge {
      height: 50px;
      line-height: 50px;
    }

    &.separate {
      .course-search-inner {
        padding-top: 10px;

        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }

          .el-checkbox__label {
            font-weight: 400;
          }

          .el-input {
            position: relative;

            .el-input__inner {
              border: none;
              padding: 0;
            }

            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }

      .course-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }

  .btn-container {
    display: flex;
    height: 36px;
    line-height: 36px;
    margin-top: 15px;
    margin-bottom: 15px;

    .btn-container-title {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .btn-container-title-select {
        @include font-color($mainColor);
      }
    }
  }

  .el-table {
    height: calc(100% - 40px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .dataForm {
    .el-select {
      width: 100%;
    }
  }

  .upload-model {
    text-align: center;
  }

  .upgrade-content {
    .info-item {
      padding-bottom: 12px;
      vertical-align: top;
      display: flex;

      .item-label {
        color: rgba(0, 0, 0, 1);
        font-weight: 400;
        font-size: 15px;
        line-height: 1.5715;
        text-align: right;
        min-width: 110px;
      }

      .item-content {
        flex: 1 1;
        color: rgba(0, 0, 0, 0.85);
        font-size: 15px;
        line-height: 1.5715;
        word-break: break-word;
        overflow-wrap: break-word;

        .item-image {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }

        .el-image {
          width: 100px;
          height: 100px;
          margin-right: 10px;
          margin-bottom: 10px;

          .image-slot {
            background-color: #f5f7fa;
          }
        }
      }
    }

  }
}
</style>
